<template>
    <div class="navbar">
        <div class="logo" @click="$router.push('/')">
            <img src="../../assets/logo.jpg" alt="">
        </div>
        <div>
            <p>
                请输入内容
                <van-icon name="search" class="search"></van-icon>
            </p>
        </div>
        <div @click="$router.push('/edit')">
            <img :src="userImg" alt="" v-if="userImg">
            <img src="../../assets/default.jpeg" @click="$router.push('/login')" alt="" v-else>
            <p>下载APP</p>
        </div>
    </div>
</template>
<script>
export default {
    props:['userImg'],
    data(){
        return{}
    }
}
</script>
<style lang="scss">
.navbar{
    height: 12.5vw;
    background-color: white;
    display: flex;
    .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 19.444vw;
        img{
            width: 70%;
        }
    }
    div:nth-child(2){
        flex:1;
        display: flex;
        align-items: center;
        margin: 0 1.389vw;
        p{
            background-color: #f4f4f4;
            padding: 2.778vw 0;
            position:relative;
            width: 100%;
            height: 3.056vw;
            line-height: 3.056vw;
            padding-left: 8.333vw;
            border-radius: 3.611vw;
            color: #aaa;
            .search{
                position:absolute;
                left: 2.778vw;
                top: 50%;
                transform: translate(0,-47%);
            }
        }
    }
    div:nth-child(3){
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 6.667vw;
            height: 6.667vw;
            border-radius: 50%;
        }
        p{
            padding: 1.389vw 2.778vw;
            margin: 0 2.778vw;
            background-color: #ff9db5;
            border-radius: 0.833vw;
            color: white;
            font-size: 3.611vw; 

        }
    }
}
</style>